<template>
  <div class="calendar-top">
    <div class="date-select">
      <select v-model="year">
        <option v-for="item in years" :key="item" :value="item">
          {{ item }}年
        </option>
      </select>
      <span @click="lastMonth">&lt;</span>
      <select v-model="month">
        <option v-for="item in months" :key="item" :value="item">
          {{ item }}月
        </option>
      </select>
      <span @click="nextMonth">&gt;</span>
    </div>
    <div class="today">
      <button @click="backToToday">今天</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';

import { createYears, createMonths } from '@/utils/index';
import { useCalendarStore } from '@/stores/calendar';

const { year, month } = storeToRefs(useCalendarStore());
const { lastMonth, nextMonth, backToToday } = useCalendarStore();

const years = ref([]);
const months = ref([]);

//初始化本地状态
onMounted(() => {
  years.value = createYears();
  months.value = createMonths();
});
</script>

<style lang="scss" scoped>
.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  background-image: linear-gradient(
    180deg,
    rgba(51, 186, 255, 0.1) 0%,
    rgba(51, 186, 255, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px 16px 0 0;
  .data-select {
    color: #333;
    select {
      padding: 4px 10px;
      border: 1px solid #eee;
      border-radius: 6px;
      &:hover {
        border: 1px solid #ccc;
        cursor: pointer;
      }
      user-select: none;
    }
    span {
      user-select: none;
      cursor: pointer;
    }
  }
  .today {
    button {
      padding: 4px 10px;
      border: 1px solid #eee;
      border-radius: 6px;
      background-color: #fff;
      &:hover {
        border: 1px solid #ccc;
        cursor: pointer;
      }
    }
  }
}
</style>
